<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="wrapper.js"></script>
</head>
<body>
    <!-- 注释风格的模板示例 -->
    <table id="table1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <!--# for(let item of this){ #-->
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.sex===0?"女":"男"}</td>
            </tr>
            <!--#}#-->
        </tbody>
    </table>

    <!-- 属性风格的模板示例 -->
    <table id="table2">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <!--注意：render()是一个假函数，其实际作用是将一行js切分成头尾两块，来包裹html标签-->
            <tr wrapper="for(let item of this){render();}">
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>${item.sex===0?"女":"男"}</td>
            </tr>
        </tbody>
    </table>

    <!-- 混合风格的模板示例 -->
    <table id="table3">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <!--#for(let item of this){#-->
            <tr>
                <td>${item.id}</td>
                <td>${item.name}</td>
                <!--语法糖：{render();}可以省略成{}-->
                <td wrapper="if(item.sex===0){}">女</td>
                <!--语法糖：{render();}可以完全省略-->
                <td wrapper="else">男</td>
            </tr>
            <!--#}#-->

            <!--注意：以上模板中用来两个语法糖
                1："if(item.sex===0){}"等效于"if(item.sex===0){render();}
                1："else"等效于"else{render();}
            -->
        </tbody>
    </table>
    <script>
        let model = [
            {id:1,name:"张向明",sex:1},
            {id:2,name:"蒋海艳",sex:0}
        ];
        document.querySelector("#table1")._wrap(model,true);
        document.querySelector("#table2")._wrap(model,true);
        document.querySelector("#table3")._wrap(model,true);
    </script>
</body>
</html>